<template>
  <div class="company-info-container">
    <!-- 顶部导航栏 -->
    <div class="company-info-header">
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="header-title">单位信息</div>
      <div class="placeholder"></div>
    </div>
    
    <!-- 提示信息 -->
    <div class="company-info-tip">
      填写真实有效的信息，审核才会通过~
    </div>
    
    <!-- 表单区域 -->
    <div class="company-info-form">
      <!-- 支付宝账号 -->
      <div class="form-item horizontal">
        <div class="form-label">支付宝账号</div>
        <div class="form-input">
          <el-input v-model="formData.alipayAccount" placeholder="请输入支付宝账号" clearable />
        </div>
      </div>
      
      <!-- 支付宝信用分 -->
      <div class="form-item horizontal">
        <div class="form-label">支付宝信用分</div>
        <div class="form-input">
          <el-input v-model="formData.alipayScore" placeholder="请输入支付宝信用分" type="number" clearable />
        </div>
      </div>
      
      <!-- 学历 -->
      <div class="form-item horizontal">
        <div class="form-label">学历</div>
        <div class="form-input">
          <el-select v-model="formData.education" placeholder="请选择学历" style="width: 100%">
            <el-option label="初中及以下" :value="0" />
            <el-option label="高中/中专" :value="1" />
            <el-option label="大专" :value="2" />
            <el-option label="本科" :value="3" />
            <el-option label="硕士" :value="4" />
            <el-option label="博士及以上" :value="5" />
          </el-select>
        </div>
      </div>
      
      <!-- 单位名称 -->
      <div class="form-item horizontal">
        <div class="form-label">单位名称</div>
        <div class="form-input">
          <el-input v-model="formData.companyName" placeholder="请输入单位名称" clearable />
        </div>
      </div>
      
      <!-- 职位 -->
      <div class="form-item horizontal">
        <div class="form-label">职位</div>
        <div class="form-input">
          <el-input v-model="formData.position" placeholder="请输入职位" clearable />
        </div>
      </div>
      
      <!-- 单位电话 -->
      <div class="form-item horizontal">
        <div class="form-label">单位电话</div>
        <div class="form-input">
          <el-input v-model="formData.companyPhone" placeholder="请输入单位电话" clearable />
        </div>
      </div>
      
      <!-- 工作年限 -->
      <div class="form-item horizontal">
        <div class="form-label">工作年限</div>
        <div class="form-input">
          <el-select v-model="formData.workYears" placeholder="请选择工作年限" style="width: 100%">
            <el-option label="1年以内" :value="0" />
            <el-option label="1-3年" :value="1" />
            <el-option label="3-5年" :value="2" />
            <el-option label="5-10年" :value="3" />
            <el-option label="10年以上" :value="4" />
          </el-select>
        </div>
      </div>
      
      <!-- 单位地址 -->
      <div class="form-item horizontal">
        <div class="form-label">单位地址</div>
        <div class="form-input">
          <el-input v-model="formData.companyAddress" placeholder="请输入单位地址" clearable />
        </div>
      </div>
      
      <!-- 月收入 -->
      <div class="form-item horizontal">
        <div class="form-label">月收入</div>
        <div class="form-input">
          <el-input v-model="formData.monthlyIncome" placeholder="请输入月收入" type="number" clearable>
            <template #append>元</template>
          </el-input>
        </div>
      </div>
      
      <!-- 现居住地址 -->
      <div class="form-item horizontal">
        <div class="form-label">现居住地址</div>
        <div class="form-input">
          <el-input v-model="formData.residenceAddress" placeholder="请输入现居住地址" clearable />
        </div>
      </div>
      
      <!-- 紧急联系人 -->
      <div class="contact-section">
        <div class="section-title">紧急联系人</div>
        
        <!-- 联系人1 -->
        <div class="form-item horizontal">
          <div class="form-label">姓名</div>
          <div class="form-input">
            <el-input v-model="formData.contact1Name" placeholder="请输入联系人姓名" clearable />
          </div>
        </div>
        
        <div class="form-item horizontal">
          <div class="form-label">手机号</div>
          <div class="form-input">
            <el-input v-model="formData.contact1Phone" placeholder="请输入联系人手机号" clearable />
          </div>
        </div>
        
        <div class="form-item horizontal">
          <div class="form-label">关系</div>
          <div class="form-input">
            <el-select v-model="formData.contact1Relation" placeholder="请选择与联系人关系" style="width: 100%">
              <el-option label="父母" :value="0" />
              <el-option label="配偶" :value="1" />
              <el-option label="子女" :value="2" />
              <el-option label="兄弟姐妹" :value="3" />
              <el-option label="朋友" :value="4" />
              <el-option label="同事" :value="5" />
              <el-option label="其他" :value="6" />
            </el-select>
          </div>
        </div>
        
        <!-- 其他紧急联系人 -->
        <div class="section-title">其他紧急联系人</div>
        
        <!-- 联系人2 -->
        <div class="form-item horizontal">
          <div class="form-label">姓名</div>
          <div class="form-input">
            <el-input v-model="formData.contact2Name" placeholder="请输入联系人姓名" clearable />
          </div>
        </div>
        
        <div class="form-item horizontal">
          <div class="form-label">手机号</div>
          <div class="form-input">
            <el-input v-model="formData.contact2Phone" placeholder="请输入联系人手机号" clearable />
          </div>
        </div>
        
        <div class="form-item horizontal">
          <div class="form-label">关系</div>
          <div class="form-input">
            <el-select v-model="formData.contact2Relation" placeholder="请选择与联系人关系" style="width: 100%">
              <el-option label="父母" :value="0" />
              <el-option label="配偶" :value="1" />
              <el-option label="子女" :value="2" />
              <el-option label="兄弟姐妹" :value="3" />
              <el-option label="朋友" :value="4" />
              <el-option label="同事" :value="5" />
              <el-option label="其他" :value="6" />
            </el-select>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 提交按钮 -->
    <div class="submit-button-container">
      <el-button type="primary" class="submit-button" @click="submitForm">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useUserStore, useUserInfoStore } from '@/store'
import userApi from '@/api/modules/user'
import userService from '../../services/userService'

const router = useRouter()
const userStore = useUserStore()
const userInfoStore = useUserInfoStore()

// 表单数据
const formData = reactive({
  alipayAccount: '',
  alipayScore: null,
  education: null,
  companyName: '',
  position: '',
  companyPhone: '',
  workYears: null,
  companyAddress: '',
  monthlyIncome: null,
  residenceAddress: '',
  contact1Name: '',
  contact1Phone: '',
  contact1Relation: null,
  contact2Name: '',
  contact2Phone: '',
  contact2Relation: null
})

// 初始化数据
onMounted(() => {
    if (userInfoStore.state.isLoaded) {
        console.log(userInfoStore.state.detailInfo)
    // 如果已经加载了用户信息，则填充表单
    formData.alipayAccount = userInfoStore.state.detailInfo.alipayAccount || ''
    formData.alipayScore = userInfoStore.state.detailInfo.alipayScore
    formData.education = userInfoStore.state.detailInfo.education
    formData.companyName = userInfoStore.state.detailInfo.companyName || ''
    formData.position = userInfoStore.state.detailInfo.position || ''
    formData.companyPhone = userInfoStore.state.detailInfo.companyPhone || ''
    formData.workYears = userInfoStore.state.detailInfo.workYears
    formData.companyAddress = userInfoStore.state.detailInfo.companyAddress || ''
    formData.monthlyIncome = userInfoStore.state.detailInfo.monthlyIncome
    formData.residenceAddress = userInfoStore.state.detailInfo.residenceAddress || ''
    formData.contact1Name = userInfoStore.state.detailInfo.contact1Name || ''
    formData.contact1Phone = userInfoStore.state.detailInfo.contact1Phone || ''
    formData.contact1Relation = userInfoStore.state.detailInfo.contact1Relation
    formData.contact2Name = userInfoStore.state.detailInfo.contact2Name || ''
    formData.contact2Phone = userInfoStore.state.detailInfo.contact2Phone || ''
    formData.contact2Relation = userInfoStore.state.detailInfo.contact2Relation
  }
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 验证手机号
const validatePhone = (phone) => {
  const reg = /^1[3-9]\d{9}$/
  return reg.test(phone)
}

// 验证表单
const validateForm = () => {
  if (!formData.companyName.trim()) {
    ElMessage.error('请输入单位名称')
    return false
  }
  
  if (!formData.companyPhone.trim()) {
    ElMessage.error('请输入单位电话')
    return false
  }
  
  if (!formData.companyAddress.trim()) {
    ElMessage.error('请输入单位地址')
    return false
  }
  
  if (!formData.monthlyIncome) {
    ElMessage.error('请输入月收入')
    return false
  }
  
  if (!formData.residenceAddress.trim()) {
    ElMessage.error('请输入现居住地址')
    return false
  }
  
  if (!formData.contact1Name.trim()) {
    ElMessage.error('请输入紧急联系人姓名')
    return false
  }
  
  if (!formData.contact1Phone.trim()) {
    ElMessage.error('请输入紧急联系人手机号')
    return false
  }
  
  if (!validatePhone(formData.contact1Phone)) {
    ElMessage.error('请输入有效的紧急联系人手机号')
    return false
  }
  
  if (formData.contact1Relation === null) {
    ElMessage.error('请选择与紧急联系人的关系')
    return false
  }
  
  // 如果填写了联系人2的部分信息，则验证完整性
  if (formData.contact2Name || formData.contact2Phone || formData.contact2Relation !== null) {
    if (!formData.contact2Name.trim()) {
      ElMessage.error('请输入其他紧急联系人姓名')
      return false
    }
    
    if (!formData.contact2Phone.trim()) {
      ElMessage.error('请输入其他紧急联系人手机号')
      return false
    }
    
    if (!validatePhone(formData.contact2Phone)) {
      ElMessage.error('请输入有效的其他紧急联系人手机号')
      return false
    }
    
    if (formData.contact2Relation === null) {
      ElMessage.error('请选择与其他紧急联系人的关系')
      return false
    }
  }
  
  return true
}

// 提交表单
const submitForm = async () => {
  if (!validateForm()) return
  // 准备用户数据
  const userData = {
    id: userStore.userId,
    alipayAccount: formData.alipayAccount,
    alipayScore: formData.alipayScore,
    education: formData.education,
    companyName: formData.companyName,
    position: formData.position,
    companyPhone: formData.companyPhone,
    workYears: formData.workYears,
    companyAddress: formData.companyAddress,
    monthlyIncome: formData.monthlyIncome,
    residenceAddress: formData.residenceAddress,
    contact1Name: formData.contact1Name,
    contact1Phone: formData.contact1Phone,
    contact1Relation: formData.contact1Relation,
    contact2Name: formData.contact2Name,
    contact2Phone: formData.contact2Phone,
    contact2Relation: formData.contact2Relation
  }
  // 调用API更新用户信息
  userService.updateUserInfoAndReturn(userData)
  // 返回个人资料页
  router.push('/user/profile')
}
</script>

<style scoped>
.company-info-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏样式 */
.company-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #3a4a6d;
  color: white;
  padding: 0 15px;
}

.back-button {
  font-size: 20px;
  cursor: pointer;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
}

.placeholder {
  width: 20px;
}

/* 提示信息样式 */
.company-info-tip {
  background-color: #f0f0f0;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
}

/* 表单区域样式 */
.company-info-form {
  margin-top: 10px;
  background-color: white;
  padding: 15px;
}

.form-item {
  margin-bottom: 15px;
}

.form-item.horizontal {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.form-item.horizontal .form-label {
  width: 120px;
  flex-shrink: 0;
  margin-bottom: 0;
  padding-right: 15px;
  color: #606266;
  font-size: 14px;
}

.form-input {
  width: 100%;
}

.form-item.horizontal .form-input {
  flex: 1;
}

/* 联系人区域样式 */
.contact-section {
  margin-top: 20px;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
  padding: 5px 0;
  background-color: #f8f8f8;
  padding-left: 15px;
  border-left: 3px solid #3a4a6d;
}

/* 提交按钮样式 */
.submit-button-container {
  padding: 20px 15px;
  margin-top: auto;
}

.submit-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #3a4a6d;
  border-color: #3a4a6d;
}
</style>